<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tableFrom.type" @tab-click="getList(1),getCardList()" v-show="false">
          <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.type.toString()"
            :label="item.name +'('+item.count +')' " />
        </el-tabs>
        <div class="container">
          <div class="demo-input-suffix acea-row">
            <el-form inline size="small" label-width="120px">
              <el-form-item label="订单状态：">
                <el-select v-model="tableFrom.order_status" placeholder="请选择" class="filter-item selWidth" clearable
                  @change="getList(1),getCardList()">
                  <el-option v-for="item in seckillStatusList" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="活动商品状态：" v-show="false">
                <el-select v-model="tableFrom.us_status" placeholder="请选择" class="filter-item selWidth" clearable
                  @change="getList,getCardList()">
                  <el-option v-for="item in productStatusList" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="商户名称：">
                <el-select v-model="tableFrom.mer_id" clearable filterable placeholder="请选择" class="selWidth"
                  @change="getList(1),getCardList()">
                  <el-option v-for="item in merSelect" :key="item.mer_id" :label="item.mer_name" :value="item.mer_id" />
                </el-select>
              </el-form-item>
              <el-form-item label="菜市场：">
                <el-input v-model="tableFrom.market" @keyup.enter.native="getList(1),getCardList()" placeholder="请输入菜市场名称"
                  class="selWidth">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1),getCardList()" />
                </el-input>
              </el-form-item>
              <el-form-item label="订单编号：">
                <el-input v-model="tableFrom.order_id" @keyup.enter.native="getList(1),getCardList()" placeholder="请输入订单编号"
                  class="selWidth">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1),getCardList()" />
                </el-input>
              </el-form-item>

              <el-form-item label="商户类别：" style="display: inline-block;" v-show="false">
                <el-select v-model="tableFrom.is_trader" clearable placeholder="请选择" class="selWidth"
                  @change="getList(1)">
                  <el-option label="自营" value="1" />
                  <el-option label="非自营" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="商品搜索：">
                <el-input v-model="tableFrom.store_name" @keyup.enter.native="getList(1)" placeholder="请输入商品名称"
                  class="selWidth">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1),getCardList()" />
                </el-input>
              </el-form-item>
              <el-form-item label="客户搜索：">
                <el-input v-model="tableFrom.user" @keyup.enter.native="getList(1)" placeholder="请输入客户姓名或昵称或电话"
                  class="selWidth">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1),getCardList()" />
                </el-input>
              </el-form-item>

              <el-form-item label="推荐级别：" v-show="false">
                <el-select v-model="tableFrom.star" placeholder="请选择" class="filter-item selWidth" clearable
                  @change="getList(1)">
                  <el-option v-for="item in recommendedLevelStatus" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- <el-button v-show="tableFrom.type === '6'" size="mini" @click="batch">批量审核</el-button>
        <el-button v-show="Number(tableFrom.type) < 3" size="mini" style="margin-left: 0px" @click="batchOff">批量强制下架 -->
        </el-button>
      </div>
      <cards-data :card-lists="cardLists" />
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="handleSelectionChange">
        <el-table-column prop="order_sn" label="订单编号" min-width="90" />
        <el-table-column prop="mar_name" label="所属菜市场" min-width="90" />
        <el-table-column label="商家信息" min-width="160">
          <template slot-scope="scope">
            <p>商家名称：{{scope.row.mer_name}}</p>
            <p>商家头像:
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.mer_avatar"
                :preview-src-list="[scope.row.mer_avatar]" />
            </div>
            </p>
            <p>联系人电话:{{scope.row.mer_phone}}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="140">
          <template slot-scope="scope">
            <p>商品图片:
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.image"
                :preview-src-list="[scope.row.image]" />
            </div>
            </p>
            <p>商品名称:{{scope.row.store_name}}</p>
            <p>商品秒杀价:{{scope.row.product_price}}</p>
            <p>支付金额:{{scope.row.pay_price}}</p>

          </template>
        </el-table-column>
        <el-table-column label="活动信息" min-width="120">
          <template slot-scope="scope">
            <div>
              开始日期：{{ scope.row.start_day ? scope.row.start_day.slice(0,10) : "" }}
            </div>
            <div>
              结束日期：{{ scope.row.end_day ? scope.row.end_day.slice(0,10) : "" }}
            </div>
            <div>
              开始时间：{{ scope.row.start_time ? scope.row.start_time+':00' : "" }}
            </div>
            <div>
              结束时间：{{ scope.row.end_time ? scope.row.end_time+':00' : "" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" min-width="120">
          <template slot-scope="scope">
            <p>头像：
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.avatar"
                :preview-src-list="[scope.row.avatar]" />
            </div>
            </p>
            <p>昵称:{{scope.row.nickname}}</p>
            <p>收货人:{{scope.row.real_name}}</p>
            <p>电话:{{scope.row.user_phone}}</p>
            <p>地址:{{scope.row.user_address}}</p>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column label="买手信息" min-width="120">
          <template slot-scope="scope">
            <p>姓名：{{scope.row.buyer ? scope.row.buyer.nickname : ""}}</p>
            <p>电话：{{scope.row.buyer ? scope.row.buyer.phone : ""}}</p>
          </template>
        </el-table-column>
        <el-table-column label="骑手信息" min-width="120">
          <template slot-scope="scope">
            <p>姓名：{{scope.row.rider ? scope.row.rider.nickname : ""}}</p>
            <p>电话：{{scope.row.rider ? scope.row.rider.phone : ""}}</p>
          </template>
        </el-table-column>

        <el-table-column prop="create_time" label="购买时间" min-width="70" />
        <el-table-column prop="stock" label="订单状态" min-width="80">
          <template slot-scope="scope">
            <span>{{scope.row.status == 0 ? "待配送" : (scope.row.status == 1 ? "配送中" : (scope.row.status == 2 ? "待评价"  : (scope.row.status == 3 ? "已完成" : "已退款")))}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column  key="8" label="操作" min-width="100" fixed="right" align="center" >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <info-from ref="infoFrom" :is-show="isShow" :ids="OffId" @subSuccess="subSuccess" />
    <el-dialog title="订单编辑" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose">
      <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate mt20" :rules="ruleValidate"
        :model="formValidate" label-width="120px" @submit.native.prevent>
        <p>商品名称：{{formValidate.store_name}}</p>
        <p>商家名称：{{formValidate.mer_name}}</p>
        <p>菜市场：{{formValidate.mar_name}}</p>
        <p>购买者：{{formValidate.nickname}}</p>
        <p>买手：{{formValidate.buyer ? formValidate.buyer.nickname : ""}}</p>
        <p>骑手：{{formValidate.rider ? formValidate.rider.nickname : ""}}</p>
        <p>
          订单状态：{{formValidate.status == 0 ? "待配送" : (formValidate.status == 1 ? "配送中" : (formValidate.status == 2 ? "待评价"  : (formValidate.status == 3 ? "已完成" : "已退款")))}}
        </p>

        <el-form-item style="margin-top:30px;">
          <el-button type="primary" class="submission" size="small" @click="handleSubmit('formValidate')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import {
    seckillOrderLstApi,
    seckillProductDetailApi,
    categoryListApi,
    seckillProductUpdateApi,
    seckillLstFilterApi,
    seckillMerSelectApi,
    seckillProductOffApi
  } from '@/api/product'
  import {
    seckillDetailApi,
    cardListApi
  } from "@/api/marketing";
  import {
    roterPre
  } from '@/settings'
  import infoFrom from './info'
  import previewBox from '@/components/previewBox/index'
  import ueditorFrom from '@/components/ueditorFrom'
  import cardsData from "@/components/cards/index";
  const proOptions = [{
    name: '热门榜单',
    value: 'is_hot'
  }, {
    name: '促销单品',
    value: 'is_benefit'
  }, {
    name: '精品推荐',
    value: 'is_best'
  }, {
    name: '首发新品',
    value: 'is_new'
  }]
  const defaultObj = {
    product_id: "",
    image: "",
    slider_image: [],
    store_name: "",
    store_info: "",
    start_day: "",
    end_day: "",
    start_time: "",
    end_time: "",
    start_day: "",
    end_day: "",
    is_open_recommend: 1,
    is_open_state: 1,
    is_show: 1,
    seckill_status: "",
    keyword: "",
    brand_id: "", // 品牌id
    cate_id: "", // 平台分类id
    mer_cate_id: [], // 商户分类id
    unit_name: "",
    integral: 0,
    sort: 0,
    is_good: 0,
    temp_id: "",
    seckill_date: "",
    finalPayment_date: "",
    delivery_type: 1,
    delivery_day: 10,
    create_time: '',
    attrValue: [{
      image: "",
      price: null,
      price: null,
      cost: null,
      ot_price: null,
      old_stock: null,
      stock: null,
      bar_code: "",
      weight: null,
      volume: null,
    }, ],
    attr: [],
    extension_type: 0,
    content: "",
    spec_type: 0,
    is_gift_bag: 0,
    tattend_two: {},
    tattend_one: {}
  };

  export default {
    name: 'ProductExamine1',
    components: {
      infoFrom,
      ueditorFrom,
      previewBox,
      cardsData
    },
    data() {
      return {
        ruleValidate: {},
        dialogVisible: false,
        detailDialog: false,
        checkboxGroup: [],
        recommend: proOptions,
        formValidate: {
          is_hot: 0,
          is_best: 0,
          is_new: 0,
          is_benefit: 0,
          ficti: 1,
          content: '',
          store_name: ''
        },
        detailFormValidate: Object.assign({}, defaultObj),
        OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
        ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
        attrInfo: {},
        cardLists: [],
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        seckillStatusList: [{ //待支付、待配送、配送中、已完成
            label: "待配送",
            value: 0
          },
          {
            label: "配送中",
            value: 1
          },
          {
            label: "已完成",
            value: 3
          },
        ],
        productStatusList: [{
            label: "上架显示",
            value: 1
          },
          {
            label: "下架",
            value: 0
          },
          {
            label: "平台关闭",
            value: -1
          },
        ],
        recommendedLevelStatus: [{
            label: "全部",
            value: ""
          },
          {
            label: "5星",
            value: 5
          },
          {
            label: "4星",
            value: 4
          },
          {
            label: "3星",
            value: 3
          },
          {
            label: "2星",
            value: 2
          },
          {
            label: "1星",
            value: 1
          }
        ],
        fullscreenLoading: false,
        isShow: false,
        roterPre: roterPre,
        listLoading: true,
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 20,
          cate_id: '',
          store_name: '',
          type: '6',
          mer_id: '',
          order_status: "",
          keyword: '',
          is_trader: '',
          star: "",
          product_id: this.$route.query.id ? this.$route.query.id : ""
        },
        categoryList: [],
        merCateList: [],
        multipleSelection: [],
        headeNum: [],
        merSelect: [],
        OffId: [],
        productId: 0,
        previewVisible: false,
        goodsId: '',
        previewKey: ''
      }
    },
    mounted() {
      this.getList('')
      this.getCardList()
    },
    methods: {
      subSuccess() {
        this.getList('')
      },
      getInfo(id) {
        this.fullscreenLoading = true
        this.checkboxGroup = [];
        seckillProductDetailApi(id)
          .then((res) => {
            const info = res.data
            this.formValidate = {
              is_hot: info.is_hot,
              is_best: info.is_best,
              is_new: info.is_new,
              is_benefit: info.is_benefit,
              ficti: info.ficti,
              content: info.content,
              store_name: info.store_name,
              rank: info.rank,
              star: info.star ? info.star : 1
            }
            if (info.is_hot === 1) this.checkboxGroup.push('is_hot')
            if (info.is_benefit === 1) this.checkboxGroup.push('is_benefit')
            if (info.is_best === 1) this.checkboxGroup.push('is_best')
            if (info.is_new === 1) this.checkboxGroup.push('is_new')
            this.fullscreenLoading = false
          })
          .catch((res) => {
            this.$message.error(res.message)
            this.fullscreenLoading = false
          })
      },
      onEdit(row) {
        // this.productId = id
        // this.getInfo(id)
        this.dialogVisible = true
        this.formValidate = row
      },
      // 提交
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            seckillProductUpdateApi(this.productId, this.formValidate)
              .then(async (res) => {
                this.fullscreenLoading = false
                this.$message.success(res.message)
                this.dialogVisible = false
                this.getList('')
              })
              .catch((res) => {
                this.fullscreenLoading = false
                this.$message.error(res.message)
              })
          } else {
            return false
          }
        })
      },
      getCardList() {
        cardListApi(this.tableFrom)
          .then((res) => {
            this.cardLists = res.data;
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      onChangeGroup() {
        this.checkboxGroup.includes('is_benefit') ? this.formValidate.is_benefit = 1 : this.formValidate.is_benefit =
          0 && this.checkboxGroup.remove('is_benefit')
        this.checkboxGroup.includes('is_best') ? this.formValidate.is_best = 1 : this.formValidate.is_best = 0 && this
          .checkboxGroup.remove('is_best')
        this.checkboxGroup.includes('is_new') ? this.formValidate.is_new = 1 : this.formValidate.is_new = 0 && this
          .checkboxGroup.remove('is_new')
        this.checkboxGroup.includes('is_hot') ? this.formValidate.is_hot = 1 : this.formValidate.is_hot = 0 && this
          .checkboxGroup.remove('is_hot')
      },
      handleClose() {
        this.dialogVisible = false
      },
      watCh(val) {
        const tmp = {};
        const tmpTab = {};
        this.detailFormValidate.attr.forEach((o, i) => {
          tmp["value" + i] = {
            title: o.value
          };
          tmpTab["value" + i] = "";
        });
        this.ManyAttrValue.forEach((val, index) => {
          const key = Object.values(val.detail).sort().join("/");
          if (this.attrInfo[key]) this.ManyAttrValue[index] = this.attrInfo[key];
        });
        this.attrInfo = {};
        this.ManyAttrValue.forEach((val) => {
          this.attrInfo[Object.values(val.detail).sort().join("/")] = val;
        });
        this.manyTabTit = tmp;
        this.manyTabDate = tmpTab;
        // this.formThead = Object.assign({}, this.formThead, tmp);
        // console.log(this.formThead)
      },
      // 预览
      handlePreview(id) {
        this.previewVisible = true
        this.goodsId = id
        this.previewKey = ''
      },
      // 查看详情
      goDetail(id) {
        this.detailDialog = true;
        this.loading = true;
        this.detailFormValidate = {}
        seckillDetailApi(id).then(async (res) => {
            this.loading = false;
            let info = res.data;
            this.detailFormValidate = {
              product_id: info.product_id,
              image: info.image,
              slider_image: info.slider_image,
              store_name: info.store_name,
              store_info: info.store_info,
              start_time: info.seckillActive && info.seckillActive.start_time ?
                info.seckillActive.start_time + ':00:00' : "",
              end_time: info.seckillActive && info.seckillActive.end_time ?
                info.seckillActive.end_time + ':00:00' : "",
              start_day: info.seckillActive && info.seckillActive.start_day ?
                (info.seckillActive.start_day).slice(0, 10) : "",
              end_day: info.seckillActive && info.seckillActive.end_day ?
                (info.seckillActive.end_day).slice(0, 10) : "",
              brand_id: info.brand_id, // 品牌id
              cate_id: info.cate_id ? info.cate_id : '', // 平台分类id
              mer_cate_id: info.mer_cate_id, // 商户分类id
              unit_name: info.unit_name,
              sort: info.sort,
              is_good: info.is_good,
              temp_id: info.temp_id,
              is_show: info.is_show,
              attr: info.attr,
              extension_type: info.extension_type,
              content: info.content,
              spec_type: info.spec_type,
              is_gift_bag: info.is_gift_bag,
              create_time: info.create_time,
              product_status: info.product_status,
              status: info.status,
              all_pay_count: info.seckillActive ? info.seckillActive.all_pay_count : "",
              once_pay_count: info.seckillActive ? info.seckillActive.once_pay_count : "",
              stock: info.stock,
              stock_count: info.stock_count,
              seckill_status: info.seckill_status,
              us_status: info.us_status,
              merchant: info.merchant
            };
            if (this.detailFormValidate.spec_type === 0) {
              this.OneattrValue = info.attrValue;
            } else {
              this.ManyAttrValue = info.attrValue
              this.watCh(this.detailFormValidate.attr)
            }
            console.log(this.ManyAttrValue);
            this.fullscreenLoading = false;
            this.detailFormValidate.seckill_date = [
              info.start_time,
              info.end_time,
            ];

          })
          .catch((res) => {
            this.fullscreenLoading = false;
            this.$message.error(res.message);
          })
      },
      // 批量下架
      batchOff() {
        if (this.multipleSelection.length === 0) {
          return this.$message.warning('请先选择商品')
        }
        this.toOff(this.OffId)
      },
      // 下架
      toOff(id) {
        this.$prompt('强制下架', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputErrorMessage: '请输入强制下架原因',
            inputType: 'textarea',
            inputPlaceholder: '请输入强制下架原因',
            inputValidator: (value) => {
              if (!value) {
                return '请输入强制下架原因'
              }
            }
          })
          .then(({
            value
          }) => {
            seckillProductOffApi({
                id: id,
                status: -2,
                refusal: value
              })
              .then((res) => {
                this.$message({
                  type: 'success',
                  message: '提交成功'
                })

                this.getList('')
              })
              .catch((res) => {
                this.$message.error(res.message)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            })
          })
      },
      // 商户列表；
      getMerSelect() {
        seckillMerSelectApi()
          .then((res) => {
            this.merSelect = res.data
          })
          .catch((res) => {
            this.$message.error(res.message)
          })
      },
      batch() {
        if (this.multipleSelection.length === 0) {
          return this.$message.warning('请先选择商品')
        }
        this.$refs.infoFrom.dialogVisible = true
        this.isShow = false
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        const data = []
        this.multipleSelection.map((item) => {
          data.push(item.product_id)
        })
        this.OffId = data
      },
      toExamine(id) {
        this.$refs.infoFrom.dialogVisible = true
        this.isShow = true
        this.$refs.infoFrom.getInfo(id)
      },
      // 列表
      getList(num) {
        this.listLoading = true
        this.tableFrom.page = num ? num : this.tableFrom.page;
        seckillOrderLstApi(this.tableFrom)
          .then((res) => {
            this.tableData.data = res.data.list
            this.tableData.total = res.data.count
            this.listLoading = false
          })
          .catch((res) => {
            this.listLoading = false
            this.$message.error(res.message)
          })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getList('')
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList(1)
      }
    }
  }
</script>

<style scoped lang="scss">
  .bg {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .rate_star {
    position: relative;
    top: 5px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand {
    /deep/ label {
      width: 77px;
      color: #99a9bf;
    }
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.33%;
  }

  .selWidth {
    width: 350px !important;
  }

  .seachTiele {
    line-height: 35px;
  }

  .box-container {
    overflow: hidden;
  }

  .box-container .list {
    float: left;
    line-height: 40px;
  }

  .box-container .sp {
    width: 50%;
  }

  .box-container .sp3 {
    width: 33.3333%;
  }

  .box-container .sp100 {
    width: 100%;
  }

  .box-container .list .name {
    display: inline-block;
    color: #606266;

  }

  .box-container .list .blue {
    color: #1890ff;
  }

  .box-container .list.image {
    margin: 20px 0;
    position: relative;
  }

  .box-container .list.image img {
    position: absolute;
    top: -20px;
  }

  .labeltop {
    max-height: 280px;
    overflow-y: auto;
  }

  .title {
    margin-bottom: 16px;
    color: #17233d;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px solid #dfe6ec;
  }
</style>
